<template>
	<div class="video_item">
		<video :src="videoCover"></video>
		<h4>{{ data.oldName }}</h4>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			videoCover: ''
		};
	},
	async mounted() {
		this.videoCover = window.staticPath + (await this.getFileUrl(this.data.id));
	},
	methods: {
		...mapActions(['getFileUrl'])
	}
};
</script>

<style lang="scss" scoped>
.video_item {
	float: left;
	width: 128px;
	font-size: 0;
	border-radius: 4px;
	border: solid 1px #e4e7ed;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	margin: 10px 0 0 10px;
	&.selected {
		border-color: #f00;
	}
	video {
		width: 100%;
		height: 72px;
		background-color: #000;
		border-bottom: solid 1px #e4e7ed;
	}
	.el-image {
		width: 100%;
		height: 72px;
		background-color: #000;
		border-bottom: solid 1px #e4e7ed;
	}
	.el-button {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		padding: 3px;
		font-size: 16px;
		border-radius: 0;
		display: none;
	}
	h4 {
		color: #303133;
		font-size: 14px;
		font-weight: normal;
		line-height: 1;
		padding: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	&:hover .el-button {
		display: block;
	}
}
</style>
